<template>
  <!--      <div>-->
  <!--        <iframe class="body" frameborder="0" scrolling="no"-->
  <!--                src="http://39.108.50.44:808/webroot/decision/view/report?viewlet=/bigscreen/嘉盛运营中心-球.frm"></iframe>-->
  <!--      </div>-->
  <div class="body">
    <div v-loading="loading" class="page-content databoard-operation flex column">
      <div class="title flex-center">嘉 盛 数 字 化 运 营 中 心</div>
      <div class="content flex">
        <!--左侧-->
        <div class="left-content flex column">
          <!--上-->
          <div class="top flex">
            <div class="module-l">
              <!--模块一 赋能全球工业绿色节能生产-->
              <Earth :base-list="pageData.base_info"/>
            </div>
            <div class="module-r flex column">
              <div class="module-1 flex">
                <div class="left">
                  <!--模块二 累计出货 稳定运行 赋能产房-->
                  <accumulative :module-data="pageData.counts"/>
                </div>
                <div class="right">
                  <!--模块三  设备数量 服务年限-->
                  <device-information :module-data="pageData.device_counts"/>
                </div>
              </div>
              <div class="module-2 flex">
                <div class="left">
                  <!--模块四 客户行业分布-->
                  <CustomerDistribution :module-data="pageData.industries"/>
                </div>
                <div class="right">
                  <!--模块五 客户增长趋势-->
                  <CustomerGrowth :module-data="pageData.increase"/>
                </div>
              </div>
              <div class="module-3 flex">
                <!-- 模块六 服务网点 技术人员-->
                <CountNum :module-data="pageData.service_points"/>
              </div>
            </div>
          </div>
          <!--下-->
          <div class="bottom flex">
            <div class="module-1">
              <!--模块七 国外荣誉-->
              <Honor :module-data="pageData.honors ? pageData.honors.foreign : []"/>
            </div>
            <div class="module-2">
              <!--模块八 国内荣誉-->
              <Honor :module-data="pageData.honors ? pageData.honors.inland: []" module-title="国内荣誉"/>
            </div>
            <div class="module-3 flex column">
              <!--模块九 设备分布-->
              <EquipmentDistribution :module-data="pageData.device_distribute"/>
            </div>
            <div class="module-4">
              <!--模块十 员工资历-->
              <EmployeeQualification :module-data="pageData.employee"/>
            </div>
          </div>
        </div>
        <!--右侧-->
        <div class="right-content flex column">
          <div class="right-content-top">
            <!--模块十一 国内基地分布-->
            <DomesticBase :module-data="pageData.inland_base"/>
          </div>
          <div class="right-content-bottom">
            <!--模块十二 国外基地分布-->
            <ForeignBase :base-location="'国外'" :module-data="pageData.foreign_base"/>
            <!--            <DomesticBase :module-data="pageData.inland_base" :base-location="'国外'"/>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import debounce from 'lodash/debounce.js'
import Earth from "@/views/reports/tu1/components/Earth.vue";
import Accumulative from "@/views/reports/tu1/components/Accumulative.vue";
import DeviceInformation from "@/views/reports/tu1/components/DeviceInformation.vue";
import CustomerDistribution from "@/views/reports/tu1/components/CustomerDistribution.vue";
import CustomerGrowth from "@/views/reports/tu1/components/CustomerGrowth.vue";
import CountNum from "@/views/reports/tu1/components/CountNum.vue";
import Honor from "@/views/reports/tu1/components/Honor.vue";
import EquipmentDistribution from "@/views/reports/tu1/components/EquipmentDistribution.vue";
import EmployeeQualification from "@/views/reports/tu1/components/EmployeeQualification.vue";
//import {isFullscreen} from "ele-admin/packages/util";
import DomesticBase from "@/views/reports/tu1/components/DomesticBase.vue";
import ForeignBase from "@/views/reports/tu1/components/ForeignBase.vue";

export default {
  components: {
    ForeignBase,
    DomesticBase,
    EmployeeQualification,
    EquipmentDistribution,
    Honor, CountNum, CustomerGrowth, CustomerDistribution, DeviceInformation, Accumulative, Earth
  },
  data() {
    return {
      loading: false,
      pageData: []
    }
  },
  mounted() {
    this.init()
  },
  watch: {},
  methods: {
    init() {
      window.addEventListener("resize", this.resizeList)
      this.$once('hook:beforeDestroy', function () {
        window.removeEventListener('resize', this.resizeList)
      })
      this.$http.get(`screens/operation`).then(res => {
        if (res.data.code === 0) {
          this.pageData = res.data.data
        }
      });
    },
    resizeList() {
      setTimeout(() => {
        const components = this.$children;
        components.forEach((item) => {
          if (item?.charts) {
            item.charts.resize();
          }
        }, 500)
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/styles/conversion.scss";
/**初始化*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/**展示区域*/
.body {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.page-content {
  width: 100%;
  height: 100%;
  background: url("/image/bg.jpeg") no-repeat center;
  background-size: 100% 100%;
  image-rendering: -webkit-optimize-contrast; // Webkit (non standard naming) 抗锯齿
  color: #fff;

  .title {
    flex: 57;
    background: url("/image/title-bg.png") no-repeat center;
    background-size: 100% 100%;
    font-weight: 900;
    @include vw(32);
  }

  /**内容展示*/
  .content {
    display: flex;
    flex: 508;
    padding: px2vw(8);
    /**左侧*/
    .left-content {
      flex: 1300;
      margin-right: px2vw(8);

      > .top {
        //border: 1px solid #fff;
        flex: 650;
        margin-bottom: px2vw(8);

        > .module-l {
          flex: 450;
          margin-right: px2vw(8);
        }

        > .module-r {
          flex: 800;

          > .module-1 {
            flex: 200;
            margin-bottom: px2vw(8);

            .left {
              flex: 250;
              margin-right: px2vw(8);
            }

            .right {
              flex: 540;
            }
          }

          > .module-2 {
            flex: 231;
            margin-bottom: px2vw(8);

            .left {
              flex: 1;
              margin-right: px2vw(8);
            }

            .right {
              flex: 1;
            }
          }

          > .module-3 {
            flex: 180;
          }
        }
      }

      > .bottom {
        //border: 1px solid #fff;
        height: 20vh;

        > .module-1 {
          flex: 218;
          margin-right: px2vw(8);
        }

        > .module-2 {
          flex: 218;
          margin-right: px2vw(8);
        }

        > .module-3 {
          flex: 400;
          margin-right: px2vw(8);
        }

        > .module-4 {
          flex: 400;
        }
      }
    }

    /**右侧*/
    .right-content {
      flex: 626;
      //border: 1px solid #fff;
      .right-content-top {
        flex: 1;
        height: px2vh(313);
      }

      .right-content-bottom {
        flex: 1;
        height: px2vh(313);
      }
    }
  }
}
</style>

